
//文档加载事件
document.ready(function () {
    /**
     * 0.获取元素
     */
    let apiCatgray = document.querySelector('.api-catgray');
    let queryText = document.querySelector('.query-text');
    let searchText = document.querySelector('.search-text');
  
    let apiList = document.querySelector('.api-list');
    let men = document.querySelector('.men')
    let box = document.querySelector('.men .box')
   
    let loginA = document.querySelectorAll('.te a')

    let logBox = document.querySelectorAll('.login-box > div')
  
    let btn = document.querySelector('.btn')
  
    /**
     * 1. 需求: 模拟api分类数据
     */
    let apiData = [
      { name: '全部', keyword: '身份证实名', isBold: false },
      { name: '生活服务', keyword: '银行卡', isBold: false },
      { name: '金融科技', keyword: '短信', isBold: false },
      { name: '交通地理', keyword: '天气', isBold: false },
      { name: '充值缴费', keyword: '话费', isBold: false },
      { name: '数据智能', keyword: 'AI', isBold: false },
      { name: '企业工商', keyword: 'IP', isBold: false },
      { name: '应用开发', keyword: 'APP', isBold: false },
      { name: '电子商务', keyword: '商务', isBold: false },
      { name: '吃喝玩乐', keyword: '畅销', isBold: false },
      { name: '文娱视频', keyword: '小建议', isBold: false },
      { name: '免费接口大全', keyword: 'free', isBold: true },
      { name: '短信', keyword: '身份证实名', isBold: false },
      { name: '汽车', keyword: '身份证实名', isBold: false },
      { name: '核验', keyword: '身份证实名', isBold: false },
      { name: '最新发布', keyword: '身份证实名', isBold: true },
      { name: 'API私有化部署', keyword: '身份证实名', isBold: true }
    ]
  
  
    /**
     * 2.需求: 将拼装好的apiData数据渲染到页面api-catgray 中
     */
    let renderData = function () {
      let apiHtml = '';//定义HTML字符串保存拼装好的数据
      apiData.forEach(function (v) {
        /* apiHtml += `
          <a data-keyword="${v.keyword}" class="${v.isBold ? 'strong': ''}">${v.name}</a>
        ` */
  
        if (v.isBold) {
          //真
          apiHtml += `
        <a data-keyword="${v.keyword}" class="strong">${v.name}</a>
        `
        } else {
          //假
          apiHtml += `
        <a data-keyword="${v.keyword}">${v.name}</a>
        `
        }
  
      })
      apiCatgray.innerHTML = apiHtml; //渲染到页面中
      apiCatgray.firstElementChild.classList.add('active')
    }
    renderData();
  
  
    /**
     * 3.需求: 点击api-catgray下a标签, 实现搜索联动效果
     */
    apiCatgray.addEventListener('click', function (e) {
      if (e.target.nodeName === 'A') {//事件源
  
        //获取当前事件源的文本内容,并渲染到query-text
        queryText.textContent = e.target.textContent
  
        //获取当前事件源的自定义属性data-keyword,并渲染到search-text中placeholder属性值
        searchText.placeholder = e.target.dataset.keyword
  
        //先-清除所有a标签的类名active
        for (let i = 0; i < apiCatgray.children.length; i++) {
          apiCatgray.children[i].classList.remove('active')
        };
  
        //给当前事件源(e.target)添加激活样式
        e.target.classList.add('active')
      };
    })
  
  
  
  
    /**
     * 4.需求: API列表区域 模拟服务器返回的数据
     */
  
    let listDataArr = [
      //第一行
      { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
      { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
      { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
      { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
      { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
      //第二行
      { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
      { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
      { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
      { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
      { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
      //第三行
      { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
      { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
      { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
      { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
      { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
      //第四行
      { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
      { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
      { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
      { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
      { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
    ]
  
  
    /**
     * 5.需求: 动态渲染api列表数据
     */
    let renderApiList = function () {
      //html字符串保存拼装好的数据
      let apiListHtml = '';
      listDataArr.forEach(function (v) {
        apiListHtml += `
        <li>
          <span class="enterprise ${v.isSpecial ? 'isShow' : ''}   ">企业专用</span>
          <div class="api-content">
            <a href="./APIID.html">
           <img src="../imgs/${v.img}" alt="">
            <p class="mt20">${v.name}</p>
            <p class="${v.price === '免费' ? 'green':'red'}">${v.price}</p>
            </a>
          </div>
          <p class="api-apply">申请数据</p>
        </li>
      
      `
      })
      //动态渲染
      apiList.innerHTML = apiListHtml;
    }
    renderApiList();
  
  
    

    /* 
      6.点击申请数据按钮（api-apply），显示蒙层（mantle）  
   */
      apiList.addEventListener('click',function(e){
        let bool = e.target.classList.contains('api-apply');
       if(bool){
            men.style.display = 'block'
       }
      })
      
      /* 
      7.点击蒙层隐藏自己
      */
     men.addEventListener('click',function(){
           this.style.display = "none"
     })
    
     /* 
     8.防止点击登陆注册窗口冒泡
     */
    box.addEventListener('click',function(e){
         //e.preventDefault()//阻止浏览器默认行为
         e.stopPropagation()//阻止事件冒泡
    })


     /* 
    9.选项卡设置，点击切换按钮（te）切换激活样式，显示对应登录控件kongdiv
    */

    
    tabCard(loginA,'active',logBox,'on');
  

    btn.addEventListener('click',function(){
      men.style.display = 'none'
    })

  })